<script setup lang="ts">
import AvatarUpload from './AvatarUpload.vue'
import type { StudentApi } from '@/apis'
import { useForm } from '@/hooks'
import getAvatar from '@/utils/avatar'
import { copyFields } from '@/utils/tools'

const props = withDefaults(defineProps<Props>(), {
  readonly: false,
})

const emits = defineEmits(['changeStudent'])

interface Props {
  readonly: boolean
  data?: StudentApi.StudentDetailResp
  studentList?: Array<StudentApi.StudentResp>
}

const { form } = useForm<any>({
  id: '',
  name: '',
  source: 'cq',
  gender: undefined,
  birthdate: undefined,
  avatar: undefined,
  admissionYear: undefined,
  fulltimeSchool: '',
  namePinyin: '',
  parentId: '',
  parentRelation: '',
  enrollStatus: 0,
  remark: '',
})

const selectChild = (e) => {
  emits('changeStudent', e)
}

watch(() => props.data, (val: any) => {
  copyFields(val, form)
  form.admissionYear = val.admissionYear ? `${val.admissionYear}` : undefined
})

const getData = () => {
  const d = JSON.parse(JSON.stringify(form))
  // d.admissionYear = d.admissionYear
  delete d.createTime
  delete d.age
  return d
}

defineExpose({ getData })
</script>

<template>
  <a-form :model="form" :readonly="props.readonly" size="medium">
    <a-row>
      <a-col :span="6">
        <div class="left">
          <div class="br-4">
            <a-image v-if="readonly" :src="getAvatar(form.avatar, form.gender)" :width="68" :height="68" />
            <AvatarUpload v-else v-model="form.avatar" :width="68" :height="68" :is-edit="!readonly" />
          </div>
          <div class="name flex-1">
            <div class="name-line">
              <readonly-form-item label="" label-width="60" :span="24" field="name">
                <a-input v-model.trim="form.name" placeholder="请输入姓名" :max-length="32" />
                <template #readonly>
                  <div class="readonly-name">
                    <a-space>
                      <span>{{ form.name }}</span>
                      <a-dropdown v-if="props.studentList" @select="selectChild">
                        <a-button size="small" type="text">
                          切换
                          <icon-down />
                        </a-button>
                        <template #content>
                          <a-doption v-for="(item, index) in props.studentList" :key="index" :value="item.id">
                            {{ item.name }}
                          </a-doption>
                        </template>
                      </a-dropdown>
                    </a-space>
                  </div>
                </template>
              </readonly-form-item>
            </div>
            <a-tag color="green" size="small">
              <DictLabel v-model="form.enrollStatus" code="EnrollStatusEnum" />
            </a-tag>
          </div>
        </div>
      </a-col>
      <a-col :span="17" :offset="1">
        <div class="info">
          <div class="items">
            <readonly-form-item label="性别" label-col-flex="60px" :span="24" field="gender">
              <DictSelect v-model="form.gender" type="button" code="GenderEnum" />
            </readonly-form-item>
            <readonly-form-item label="家长关系" label-col-flex="60px" :span="24" field="parentRelation">
              <DictSelect v-model="form.parentRelation" code="ParentRelation" placeholder="请选择家长关系" />
            </readonly-form-item>
            <readonly-form-item label="出生年月" label-col-flex="60px" :span="24" field="birthdate">
              <a-date-picker v-model.trim="form.birthdate" placeholder="出生日期" />
            </readonly-form-item>
            <readonly-form-item label="就读学校" label-col-flex="60px" :span="24" field="fulltimeSchool">
              <a-input v-model.trim="form.fulltimeSchool" placeholder="请输入就读学校" :max-length="32" />
            </readonly-form-item>
            <readonly-form-item label="入学年份" label-col-flex="60px" :span="24" field="admissionYear">
              <a-year-picker v-model.trim="form.admissionYear" placeholder="入学年份" />
            </readonly-form-item>
            <readonly-form-item label="来源" label-col-flex="60px" :span="24" field="source">
              <DictSelect v-model="form.source" code="StudentSource" placeholder="请选择招生来源" />
            </readonly-form-item>
          </div>
        </div>
      </a-col>
    </a-row>
  </a-form>
</template>

<style lang="less" scoped>
.left {
  display: flex;
  align-items: center;
  border-right: 1px solid #eee;

  :deep(.arco-form-item-label-col) {
    width: 0;
    display: none;
  }
}

.flex-1 {
  flex: 1;
}

.name {
  margin-left: 20px;
  gap: 15px;

  :deep(.arco-form-item) {
    margin-bottom: 8px;
  }

  &-line {
    display: flex;
    align-items: center;

    .readonly-name {
      flex-shrink: 0;
      display: flex;
      align-items: center;

      span {
        font-size: 20px;
        font-weight: bold;
        color: #111;
      }

      :deep(.arco-btn-size-small) {
        padding: 0 5px;
      }
    }
  }
}

.info {
  .title {
    font-weight: bold;
    font-size: 16px;
    color: #1d2129;
  }

  .items {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    grid-template-rows: repeat(2, 1fr);
    row-gap: 6px;
    column-gap: 20px;

    .item {
      :deep(.arco-col-5) {
        flex-shrink: 0;
        width: auto;
        flex: none;
      }
    }

    .label {
      width: 60px;
      text-align: right;
      color: #999;
    }
  }

  :deep(.arco-form-item) {
    margin-bottom: 0px;
  }
}

.br-4 {
  border-radius: 4px;
  overflow: hidden;
}
</style>
